<template>
  <div class="box">
    <!-- 头部banner -->
    <div class="top">
      <van-row gutter="32">
        <!-- <router-link to="/RiskIndex">
          <van-col span="8"><van-icon name="arrow-left" /></van-col>
        </router-link> -->
        <van-col span="8" @click="$router.go(-1)"><van-icon name="arrow-left" /></van-col>
        <van-col span="8" class="text">风险能力测评</van-col>
        <van-col span="8"><van-icon name="ellipsis" /></van-col>
      </van-row>
    </div>
    <!-- 内容 -->
    <div class="tip">
      <img src="./assets/顶部提示.svg" alt="请找lzb调试">
    </div>
    <div class="question-container">
      <h3>1. 您的年龄属于以下哪个组别</h3>
      <div v-for="(option, index) in options" :key="index" class="option"
        :class="{ selected: selectedOption === option.value }" @click="selectOption(option.value)">
        <p>{{ option.label }}</p>
      </div>
      <div class="btn-p">
        <p><router-link to="/Riskend">下一题</router-link></p>
      </div>
    </div>
    <!-- 凑高度 -->
    <div class="height"></div>
  </div>
</template>

<script>
import router from '../../router';

export default {
  data() {
    return {
      options: [
        { label: 'A. 16岁（含）至17岁且有劳动收入', value: 'A' },
        { label: 'B. 50岁至64岁', value: 'B' },
        { label: 'C. 40岁至49岁', value: 'C' },
        { label: 'D. 18岁至29岁', value: 'D' },
        { label: 'E. 30岁至39岁', value: 'E' },
        { label: 'F. 65岁（含以上）', value: 'F' },
      ],
      selectedOption: 'D',
    };
  },
  methods: {
    selectOption(value) {
      this.selectedOption = value;
    },
  },
};

</script>

<style scoped>
.box {
  height: 100%;
  background-image: url('./assets/背景图.svg');
}

/* 头部banner */
.top {
  height: 30px;
  position: relative;
  border: 1px solid rgb(208, 234, 255);
}

.top .van-icon-arrow-left {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(-50%, -50%);

}

.top .van-icon-ellipsis {
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translate(-50%, -50%);

}

.top .text {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 内容 */
.tip {
  margin-top: 5px;
}

.tip img {
  width: 80%;
  height: auto;
}

.question-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* 完成ui图左偏与上偏设计 */
  padding: 20px;
  padding-bottom: 10px;
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;
}

.question-container h3 {
  font-weight: bold;
  /* 完成ui图左偏与上偏设计 */
  margin-top: -30px;
  margin-left: -18%;

}

.option {
  padding: 5px;
  margin: 8px 0;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  height: 40px;
  display: flex;
  align-items: center;
  /* 垂直居中对齐 */
}

.option p {
  float: left;
  margin-left: 3%;
}

.option.selected {
  background-color: #b0d6f7;
}

.btn-p {
  color: blue;
  margin-top: 10px;
}

.btn-p p {
  text-align: right;
  margin-right: 2px;
}

.height {
  height: 200px;
}
</style>